<template>
  <div>
    <el-card>
      <el-page-header
        icon=""
        content="产品列表"
        title="产品管理"
        class="page_header"
      ></el-page-header>
      <div class="searchReset">
        <el-form
          :inline="true"
          ref="searchFormRef"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="产品名称">
                <el-input
                  v-model="searchForm.title"
                  placeholder="支持产品名称模糊查询"
                  clearable
                  @keyup.enter="getTableData()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
              <div style="float: right; margin-right: 33px">
                <el-button type="primary" @click="getTableData()"
                  >查询</el-button
                >
                <el-button @click="handleReset()">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        show-overflow-tooltip
        stripe
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#E7E7E7' }"
      >
        <el-table-column prop="title" label="产品名称" width="160" />
        <el-table-column prop="introduction" label="简要描述" >
        </el-table-column>
        <el-table-column prop="creater" label="创建人" width="110"/>
        <el-table-column prop="editTime" label="更新时间" width="180">
          <template #default="scope">
            {{ formatTime.getTime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          header-align="center"
          width="110"
        >
          <template #default="scope">
            <!-- // 编辑 -->
            <el-button
              circle
              :icon="Edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <!-- // 删除 -->
            <el-popconfirm
              title="确定要删除吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button circle :icon="Delete" type="danger"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import formatTime from '@/util/formatTime'
import { View, Edit, Delete, CaretBottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()

const router = useRouter()

const tableData = ref([])

const searchFormRef = ref()
const searchForm = ref({
  title: '',
})

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const res = await axios.post(`/adminApi/product/list`,{ creater : store.state.userInfo.userName, ...searchForm.value})
  if (res.data.code === '0000') {
    tableData.value = res.data.data
  }
}

const handleReset = async () => {
  searchForm.value.title = ''
  await getTableData()
}

const handleDelete = async (item) => {
  // console.log(item);
  const res = await axios.delete(`/adminApi/product/list/${item._id}`)
  if (res.data.code === '0000') {
    ElMessage.success(res.data.msg)
    await getTableData()
  }
}

const handleEdit = async (item) => {
  // 跳转到编辑页
  router.push(`/product-manage/editProduct/${item._id}`)
}
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 10px;
}
.page_header{
  padding-bottom: 18px;
  border-bottom: 1px solid #dadada;
}
::v-deep .htmlcontent {
  img {
    max-width: 100%;
  }
}
.searchReset {
  margin-top: 20px;
}
</style>
